<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<link rel="stylesheet" type="text/css" media="screen" href="/MES_ADMIN_Project/themes/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/MES_ADMIN_Project/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/MES_ADMIN_Project/css/employee.css"/>
<script src="/MES_ADMIN_Project/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/MES_ADMIN_Project/js/ui.core.js"></script>
<script type="text/javascript" src="/MES_ADMIN_Project/js/ui.datepicker.js"></script>
<script type="text/javascript" src="/MES_ADMIN_Project/js/calendar.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#tb tbody td").live('click',function(){ 
			$(this).parent().siblings().css("background","white");
			$(this).parent().css("background","#F4FFFF");
//			alert($(this).parent().children("td:nth-child(2)").text());
			CenterOpenWindow("employeeDetial.do?employee_no="+$(this).parent().children("td:nth-child(2)").text(),"회원상세","550","200","scrollbars=yes, status=yes");
		});
		
		function CenterOpenWindow(theURL, winName, width, height, fstate ) {
		    var features = "width=" + width ;
		    features += ",height=" + height ;
					var state = "";
					if (fstate == "") {
			       state = features + ", left=" + (screen.width-width)/2 + ",top=" + (screen.height-height)/2;
					} else {
			       state = fstate + ", " + features + ", left=" + (screen.width-width)/2 + ",top=" + (screen.height-height)/2;
					}
					popupWin = window.open(theURL,winName,state+",resizable=1 ");
		    popupWin.focus();
		}
		$("#allcheck").bind("click",function(){
			var flag = $(this).attr("checked");
			if(flag){// flag에 값이 있으면 true 넘어가고 
				$("input[name=employee]").attr("checked",true);
			}else{//undefind면 false로 넘어간다.
				$("input[name=employee]").attr("checked",false);
			}
		});
		$("#Ebtn").click(function(){
			//		alert($("input:checkbox[name='employee']:checked").val());
					var f = document.f1;
					if($("input:checkbox[name='employee']:checked").val()==undefined){
						alert("삭제할 대상을 선택해주세요");
						return;
					}else{
						f.action="delete.do?employee="+$("input:checkbox[name='employee']:checked").val();
						f.submit();
					}					
				});
	});
	var xhr;
	function createXhr(){
		if(window.ActiveXObject){ //IE 예전 버젼
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}else{
			xhr = new XMLHttpRequest();
		}
	}
	function searchEmployee(){
		createXhr();
		var name = $("#name").val();
		var flag = $("#flag").val();
		var startdate = $("#startdate").val();
		var enddate = $("#enddate").val();
		var department = $("#department").val();
		xhr.onreadystatechange = callback;
		var questString = "employee_name="+name+"&employee_yn="+flag+"&startdate="+startdate+"&enddate="+enddate+"&employee_department="+department;
		xhr.open("POST", "searchEmployee.do",true);
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send(questString);
	}
	function callback(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				var data = JSON.parse(xhr.responseText);
				$("#tbody").empty();
				if(data.list==""){
					$("#tbody").append($("<tr>").append($("<td colspan='8' align='center'>").html("<font size=4 color=red>검색하신 결과가 없습니다.</font>")));
					return ;
				}
				for(i=0; i<data.list.length; i++){
					$("#tbody").append(
							$("<tr>").append($("<th>").html("<input type='checkbox' name='employee' value="+data.list[i].employee_no+" id='test'>")).append(
							$("<td>").html("<font style='cursor:pointer'>"+data.list[i].employee_no+"</font>")).append(
							$("<td>").html(data.list[i].employee_name)).append(
							$("<td>").html(data.list[i].employee_department)).append(
							$("<td>").html(data.list[i].registration_number1+"-"+data.list[i].registration_number2)).append(
							$("<td>").html(data.list[i].phone_no01+"-"+data.list[i].phone_no02+"-"+data.list[i].phone_no03)).append(
							$("<td>").html(data.list[i].day)).append(
							$("<td>").html(data.list[i].employee_yn))
							);
				}
			}
		}
	}
		function reset1(){
			$("#tbody").empty();
		}
</script>
</head>
<form action="" name="f1" >
<table  width="127%" cellspacing="0" class="member">
	<tr>
		<th>
			회원이름
		</th>
		<td>
			<input type="text" name="employee_name" id="name">
		</td>
		<th>
			관리자
		</th>
		<td>
			<select name="employee_yn" id="flag">
				<option value="">선택하세요</option>
				<option value="Y">Y</option>
				<option value="N">N</option>
			</select>
		</td>
	</tr>
	<tr>
		<th>
			가입일
		</th>
		<td>
			<input type="text" id="startdate" name="startdate" id="startdate" size="21" onchange="commonWork()" readonly="readonly"/>
    		~
    		<input type="text" id="enddate" name="enddate" id="enddate" size="21" onchange="commonWork()" readonly="readonly"/>
    	</td>
    	<th>
    		부서
    	</th>
    	<td>
    		<input type="text" name="employee_department" id="department">
    	</td>
    </tr>
    <tr>
		<td colspan="4" align="right">
 			<img src="/MES_ADMIN_Project/img/btn_date_search.gif" onmouseout="src='/MES_ADMIN_Project/img/btn_date_search.gif'" onmouseover="src='/MES_ADMIN_Project/img/btn2_search.gif'" align="bottom" onclick="searchEmployee()" style="cursor: pointer">
			<input type="button" value="삭제" id="Ebtn">
			<input type="reset" value="초기화" onclick="reset1()">
		</td>
	</tr>
</table>
<br>
<table width="140%" cellspacing="0" id="tb" class="member2">
	<thead>
		<tr>
			<td width="3%">
				<input type="checkbox" id="allcheck" name="allcheck">
			</td>
			<th>
				사원 번호
			</th>
			<th>
				사원 이름
			</th>
			<th>
				부 서
			</th>
			<th>
				사원 주민 번호
			</th>
			<th>
				핸드폰 번호
			</th>
			<th>
				입사일
			</th>
			<th>
				관리자
			</th>
		</tr>
	</thead>
	<tbody id="tbody">
	<c:if test="${not empty message }">
		${message }
	</c:if>
	</tbody>
</table>
</form>
